<template>
  <div>
    <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
      <a-card :bordered="false">
        <a-form-model ref="form" :model="approveRecord" :rules="rules" slot="title">
          <a-row v-if="post">
            <a-col :span="16" style="height: 10px; margin-right: 10px">
              <a-form-model-item prop="reason">
                <a-select
                  style="width: 100%"
                  show-search
                  :allowClear="true"
                  :value="approveRecord.reason"
                  placeholder="审核原因"
                  :default-active-first-option="false"
                  :show-arrow="false"
                  :filter-option="false"
                  :not-found-content="fetching ? undefined : null"
                  @focus="handleFocus"
                  @search="handleSearch"
                  @change="handleChange"
                  @blur="handleBlur"
                >
                  <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                  <a-select-option v-for="(d, index) in reasonList" :key="index">
                    {{ d }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-space>
                <a-button type="primary" icon="check" @click="submitForm(true)"> 通过 </a-button>
                <a-button type="danger" icon="close" @click="submitForm(false)"> 拒绝 </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>

      <a-tabs default-active-key="1" :activeKey="activeKey" @change="callback" style="margin: 10px">
        <a-tab-pane key="1" tab="列表">
          <a-list item-layout="vertical" size="large" :data-source="postList">
            <a-list-item slot="renderItem" key="item.id" slot-scope="item">
              <div v-for="{ type, dataIndex } in actions" slot="actions" :key="type">
                <span>
                  <a-icon :type="type" style="margin-right: 8px" />
                  {{ item[dataIndex] }}
                </span>
              </div>
              <img v-if="item.image" slot="extra" width="272" height="148" alt="image" :src="imageUrl + item.image" />
              <a-list-item-meta>
                <span slot="description" style="font-size: 12px; margin-right: 5px">
                  {{ item.publishTime }}
                  <a-tag color="blue">
                    {{ typeFormat(item) }}
                  </a-tag>
                </span>
                <span slot="title">
                  {{ item.userName }}
                  <a-tag style="margin-left: 5px">
                    {{ item.regionName }}
                  </a-tag>
                </span>
                <a-avatar :size="48" slot="avatar" :src="imageUrl + item.avatar" />
              </a-list-item-meta>
              <a class="text-2-line" @click="activeKey = '2'">{{ item.title }}</a>
            </a-list-item>
          </a-list>
        </a-tab-pane>
        <a-tab-pane key="2" tab="详情" force-render>
          <div v-if="post">
            <a-tooltip placement="topLeft">
              <template slot="title">
                {{ post.title }}
              </template>
              <h1 class="title text-2-line">
                {{ post.title }}
              </h1>
            </a-tooltip>
            <div class="user-info">
              <a-avatar slot="avatar" :size="50" :src="imageUrl + post.avatar" />
              <div style="display: block; margin-left: 8px">
                <div class="click-user">
                  {{ post.userName }}
                  <a-tag color="blue" style="color: #2f54eb; margin-left: 2px">
                    {{ typeFormat(post) }}
                  </a-tag>
                  <span> {{ post.regionName }}·{{ post.sectionName }}</span>
                </div>
                <div class="post-relate">
                  <a-tooltip placement="bottom">
                    <template slot="title">发布于 {{ post.publishTime }}</template>
                    {{ post.editTime ? post.editTime : post.publishTime }}
                  </a-tooltip>
                  收藏 {{ post.collectNumber }}点赞 {{ post.likeNumber }}回复 {{ post.replyNumber }}
                </div>
              </div>
            </div>
            <div class="post-cover">
              <img v-if="post.image" alt="image" :src="imageUrl + post.image" />
            </div>
          </div>
          <a-empty v-else />
          <div class="vditor-reset" id="vditorPreview"></div>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </div>
</template>

<script>
import { listPost, approvePost } from '@/api/platform/post'
import { listApproveConfig } from '@/api/platform/approveConfig'
import VditorPreview from 'vditor/dist/method.min'
import 'vditor/dist/index.css'
import PostApprove from './PostApprove'

export default {
  name: 'PostDetail',
  props: {
    postId: {
      type: String,
      required: false
    },
    typeOptions: {
      type: Array,
      required: true
    }
  },
  components: {},
  data() {
    return {
      //图片链接
      imageUrl: process.env.VUE_APP_BASE_API,
      spinning: false,
      delayTime: 100,
      postList: [],
      post: undefined,
      fetching: false,
      approveRecord: {
        itemId: undefined,
        reason: undefined,
        type: undefined
      },
      reasonList: [],
      rules: {
        reason: [{ required: true, message: '审核原因不能为空', trigger: 'blur' }]
      },
      actions: [
        { type: 'star-o', dataIndex: 'likeNumber' },
        { type: 'like-o', dataIndex: 'collectNumber' },
        { type: 'message', dataIndex: 'replyNumber' }
      ],
      activeKey: '1'
    }
  },
  mounted() {},
  watch: {
    postId: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.initData()
        } else {
          this.reset()
        }
      }
    }
  },
  created() {},
  methods: {
    ...PostApprove.methods,
    submitForm(flag) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.approveRecord.itemId = this.postId
          if (flag) {
            this.approveRecord.type = '0'
          } else {
            this.approveRecord.type = '1'
          }
          const saveForm = JSON.parse(JSON.stringify(this.approveRecord))
          approvePost(saveForm).then(response => {
            this.$message.success('审核成功', 3)
            this.$emit('getList')
          })
        }
      })
    },
    handleBlur(value) {
      this.approveRecord.reason = value
    },
    handleChange(value) {
      this.approveRecord.reason = this.reasonList[value]
    },
    handleSearch(value) {
      this.approveRecord.reason = value
    },
    handleFocus() {
      const queryParam = {
        pageNum: 1,
        pageSize: 10,
        itemId: this.post.regionId,
        status: '0'
      }
      this.fetching = !this.fetching
      listApproveConfig(queryParam).then(response => {
        console.log(response.data)
        const reason = response.data.rows[0]
        this.reasonList = reason.sentence.split(',')
        this.fetching = !this.fetching
      })
    },
    renderMarkdown(value) {
      VditorPreview.preview(document.getElementById('vditorPreview'), value)
    },

    initData() {
      this.spinning = !this.spinning
      this.$refs.form.resetFields()
      this.post = undefined
      this.activeKey = '1'
      listPost({ id: this.postId }).then(response => {
        this.postList = response.data.rows
        this.post = this.postList[0]
        this.renderMarkdown(this.post.content)
        this.spinning = !this.spinning
      })
    },
    reset() {
      this.postList = []
      this.activeKey = '1'
      this.post = undefined
      this.approveRecord = {
        itemId: undefined,
        reason: undefined,
        type: undefined
      }
      this.renderMarkdown('')
    },
    callback(key) {
      this.activeKey = key
    }
  }
}
</script>

<style lang="less" scoped>
.user-info {
  display: flex;
  align-items: center;
}
.click-user {
  display: block;
  color: #1d2129;
  font-size: 16px;
  font-weight: 500;
  margin-left: 6px;
  margin-bottom: 6px;
  span {
    font-size: 13px;
    color: #969696;
  }
}
.post-relate {
  display: inline-block;
  font-size: 13px;
  color: #969696;
  margin-left: 6px;
}
.post-cover {
  margin-top: 10px;
  img {
    width: 100%;
    max-height: 300px;
  }
}

.title {
  color: #1d2129;
  font-size: 26px;
  font-weight: 700;
}
.text-2-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
